<template>
    <el-row class="main-cont padd20">
        <el-col :span="24" class="main">
            <el-col :span="24" class="h100">
                <el-col :span="24" class="h100 center">
                    <!-- <el-col :span="24" class="nav-bar">
                        <div></div>
					</el-col> -->
                    <el-col class="fr">
                        <el-button type="primary" class="button" @click="openDia()" v-if="page.list.length !=0">
                            创建录播
                        </el-button>
                    </el-col>

                    <el-col :span="24" class="course-ul" v-if="page.list.length !=0">
                        <el-row class="course-ul-main box box-pack-start">
                            <el-col :span="6" class="course-ul-li" v-for="(item,index) in page.list" :key="index"
                                @click.native="startZb(item)">
                                <div class="live-bar">

                                    <div class="edit-cont" @click.stop>
                                        <div class="edit">···</div>
                                        <div class="cop-bar">
                                            <div @click="openXgzb(item)">编辑</div>
                                            <!-- <div @click="delLive(item.id,item.serial)">删除</div> -->
                                        </div>
                                    </div>

                                </div>
                                <el-col :span="24" class="img">
                                    <el-image :src="item.cousUrl" class="pic"></el-image>
                                    <el-image src="/static/image/course/icon_play.png" class='icon-play'></el-image>
                                    <div class="kssj" v-if="item.status == 0"><span class="tips">开播时间</span>
                                        {{item.kssj.substring(5)}}
                                    </div>
                                </el-col>
                                <el-col :span="24" class="live-info" v-if="item.status != 0">
                                    <div class="live-top">
                                        <div class="course-name">{{item.name}}</div>
                                        <!-- <div class="icon">{{item.kssj.substring(5)}}</div> -->
                                        <div class="share" @click.stop>
                                            <el-image src="/static/image/1.png" style="width: 26px;"
                                                @click="share(item)"></el-image>
                                        </div>
                                    </div>
                                    <div class="live-bottom">
                                        <div class="tr-name">
                                            <el-avatar size="small" :src="item.icon"></el-avatar>

                                            <div class="ml10 name">{{item.trName}}</div>
                                        </div>
                                        <div class="cnt">报名人数：{{item.signcnt}}</div>
                                    </div>
                                </el-col>
                                <el-col :span="24" class="live-info" v-if="item.status == 0">
                                    <div class="live-top">
                                        <div class="course-name">{{item.title}}</div>
                                        <div class="share" @click.stop>
                                            <el-image src="/static/image/1.png" style="width: 26px;"
                                                @click="share(item)"></el-image>
                                        </div>
                                    </div>
                                    <div class="live-bottom">
                                        <div class="tr-name">
                                            <el-avatar size="small" :src="item.icon"></el-avatar>

                                            <div class="ml10 name">{{item.trName}}</div>
                                        </div>
                                        <div class="cnt" @click.stop="signList(item)">{{item.signcnt}}人已报名</div>

                                    </div>
                                </el-col>
                            </el-col>
                        </el-row>

                        <el-col :span="24" class="mt20 tc">
                            <el-pagination @current-change="handleCurrentChange" background :current-page="page.pageNum"
                                :page-size="page.pageSize" layout="prev, pager, next,total" :total="page.total"
                                :hide-on-single-page="true">
                            </el-pagination>
                        </el-col>

                    </el-col>
                    <el-col :span="24" class="course-ul h100 nodata" v-if="page.list.length ==0">
                        <el-image src="/static/image/no_data.png" class="img"></el-image>
                        <div v-if="n == 0">您还没有录播课程,请先 <el-button type="primary" @click="openDia()">创建录播
                            </el-button>
                        </div>
                        <div v-if="n != 0">
                            暂无数据
                        </div>
                    </el-col>
                </el-col>
            </el-col>

            <el-dialog title="编辑录播" :visible.sync="xgzb" center class="dia" width="856px" height="620px" @close="close">
                <div class="el-dialog-div">
                    <div class="info">
                        <el-form :model="zbForm" class="info-form" label-position="left">
                            <div class="w403">
                                <el-form-item label="录播名称" label-width="80px">
                                    <el-input v-model="zbForm.cousName" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="上课时间" label-width="80px">
                                    <el-date-picker v-model="zbForm.date" type="date" placeholder="选择日期" class="w159"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                    <el-time-picker is-range v-model="zbForm.timeValue" range-separator="-"
                                        start-placeholder="开始" end-placeholder="结束" placeholder="选择时间范围" class="w159"
                                        value-format="HH:mm" format="HH:mm">
                                    </el-time-picker>
                                </el-form-item>
                                <el-form-item label="内容简介" label-width="80px" prop="cont">
                                    <!-- <el-input type="textarea" v-model="zbForm.cont"></el-input> -->
                                    <div id="div1" class="edit"></div>
                                </el-form-item>
                            </div>

                            <div class="img-up">
                                <el-form-item label="" label-width="0" id="up-img-div" class="up-img-div zb">
                                    <el-upload class="avatar-uploader" :action="uploadfileurl" :show-file-list="false"
                                        :on-progress="progress" :on-success="success" :before-upload="beforeUpload">
                                        <img v-if="zbForm.img" :src="zbForm.img" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                                <div class="slt">
                                    <img :src="item.sltUrl" alt="" class="img" v-for="(item,i) in images" :key="i"
                                        :class="{checked:item.sltUrl == zbForm.img}"
                                        @click="change(i,item.sltUrl,item.sltUrl)">
                                </div>
                                <span class="psa-img">课程封面</span>
                            </div>

                        </el-form>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button type="text" @click="updateLive">确 定</el-button>
                    <el-button type="text" @click="xgzb =false">取 消</el-button>
                </div>
            </el-dialog>
            <add-course :title="diaTitle" val="1" :dialogFormVisible="diaShow" ref="child" :editData="editData"
                @closeDia="closeDia" @update="initZbk">
            </add-course>

            <!-- 分享 -->
            <el-dialog title="邀请观看录播" :visible.sync="shareDialogVisible" width="700px" :center="true"
                @close="closeCode">
                <div class="dia-cont">
                    <div class="dia-top">
                        <!-- <el-image src="/static/image/code_xcx.jpg" class="img"></el-image> -->
                        <!-- <div class="qrcode" ref="qrCodeUrl" ></div> -->
                        <div class="img" id="qrcode" ref="qrCodeUrl"></div>
                        <div class="dia-info">
                            打开微信扫描左侧二维码<br>
                            按以下步骤，轻松邀请学员加入您的录播
                        </div>
                    </div>
                    <div class="step">
                        1.点击微信右上角 "···" ,发送给朋友，选择微信群即可
                    </div>
                </div>
            </el-dialog>
        </el-col>
    </el-row>

</template>

<script>
    import addCourse from './addCourseDia.vue';
    import QRCode from 'qrcodejs2'
    import E from 'wangeditor';
    export default {
        components: {
            addCourse,
        },
        data() {
            return {
                shareDialogVisible: false,
                uploadfileurl: this.$url.baseURL + '/upload/uploadfile',
                navList: [{
                        title: '未开始',
                        state: '0'
                    },
                    {
                        title: '录播中',
                        state: '1'
                    },
                    {
                        title: '已结束',
                        state: '2'
                    },
                    {
                        title: '已过期',
                        state: '4'
                    }
                ],
                diaTitle: '创建录播',
                diaShow: false,
                user: this.$store.state.loginInfo.user,
                page: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 0,
                    list: []
                },
                xgzb: false,
                zbForm: {
                    id: '',
                    cousName: '',
                    img: '',
                    cont: '',
                    date: '',
                    timeValue: ['00:00', '23:59']
                },
                images: [{
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/9524E6E1F7FD4665ACE117D5BA7F73386.jpg?Expires=4765415777&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=XWRT8RHs2GV4gCfy1SkE0N%2FrYu4%3D'
                    },
                    {
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/A88B376A2CA845F89AE50CA768EAF5C35.jpg?Expires=4765415773&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=u20iRcxFduqU8myj4yz1Df2dQxQ%3D'
                    },
                    {
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/76DC365A2B124D06B4CC9F943BA3231D4.jpg?Expires=4765415770&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=dP3B%2Bp08fnZa91NKn7mNkFOlFus%3D'
                    },
                    {
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/C03F4B4A119849219B13358A8EDAE3523.jpg?Expires=4765415767&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=3zQTU2b0X%2FaPmyz0afkBfm4yr5o%3D'
                    },
                    {
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/68E4F5BEBB6941E494D987C873C1FD062.jpg?Expires=4765415764&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=o5p%2Ff7K7odsTjSGdLoAZEM8V1AA%3D'
                    },
                    {
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/7AA2635CC8EB444181F60FBE5C8227B41.jpg?Expires=4765415739&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=h%2Fc1JFMBhWQpPEYBAv1Ah2jd82M%3D'
                    },
                    {
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/B9F551F0CD554BEFBA4A647AA495B91613.jpg?Expires=4765415796&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=naMn8ws9%2Fra1yPpJJLpUawbUM%2BQ%3D'
                    },
                    {
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/D6CF6B0891A94CBAB5751A1541E8767F12.jpg?Expires=4765415794&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=OEJCKjm84TVo00wdFrcBvpU28fA%3D'
                    },
                    {
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/96336BD841E745298075364F0FBEE80F11.jpg?Expires=4765415791&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=zGx1dRyeQZhBRUXJE%2BBDfWmIx3o%3D'
                    },
                    {
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/E8D45861416346CD83681853F4EDFF9310.jpg?Expires=4765415788&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=UsKGMp5t9QCexDVV163JSsAq65U%3D'
                    },
                    {
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/D0BDEE29A8A645B1ADC928CD3E9FDC879.jpg?Expires=4765415785&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=frmz9hZDpBwpc3ff3o0EAvgUN2c%3D'
                    },
                    {
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/0C50AFC888C640E2A6C1DECEC7D2CFE38.jpg?Expires=4765415783&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=V9QO8tMwft1c8qA2ozgKRkvV0Cg%3D'
                    },
                    {
                        sltUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/3B242A2BF59A4DADAFE7F6FCB07A2CE87.jpg?Expires=4765415780&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=oDL9EME6gPs%2BUBKTaikjXkso7IA%3D'
                    }
                ],
                num: 0,
                n: 0,
                state: '',
                editor: null,
                searchText: '',
                editData: {}
            }
        },
        mounted() {
            this.initZbk();

            console.log(this.user)
        },
        methods: {
            setEditor() {
                console.log(111);
                this.editor = new E(`#div1`)
                // 或者 const editor = new E( document.getElementById('div1') )
                this.editor.config.height = 200
                this.editor.config.placeholder = '请填写内容'
                this.editor.config.menus = [
                    'head',
                    'fontSize',
                    'fontName',
                    'lineHeight',
                    'foreColor',
                    'justify',
                    'image',
                ]
                this.editor.config.uploadImgShowBase64 = true
                this.editor.config.showFullScreen = false
                this.editor.config.zIndex = 5
                this.editor.config.focus = true
                this.editor.create()
            },
            close() {
                this.editor.destroy()
                this.editor = null
            },
            openDia() {
                this.diaTitle = '创建录播'
                this.diaShow = true
                this.$nextTick(res=>{
                    this.$refs.child.setEditor()
                    this.$refs.child.resetForm()
                })

            },
            signList(item){
                console.log(item);
            },
            creatQrCode(zbid) {
                var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                    text: "https://www.wytldy.com/wygzh/VideoDetail?id=" + zbid+"&type=3",
                    width: 100,
                    height: 100,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                })
            },
            //分享
            share(item) {
                console.log(item);
                this.shareDialogVisible = true
                this.$nextTick(() => {
                    this.creatQrCode(item.id)
                })
            },
            closeCode() {
                this.$refs.qrCodeUrl.innerHTML = ''
            },
            handleCurrentChange(val) { //跳转到指定页
                this.page.pageNum = val
                this.initZbk();
            },
            changes(i) {
                this.n = i;
                this.state = this.navList[i].state;
                this.initZbk();
            },
            closeDia() {
                this.diaShow = false
                this.$refs.child.destroy()
            },
            openXgzb(zb) {
                console.log(zb);
                this.editData = zb
                this.diaTitle = '编辑录播'
                this.diaShow = true
                this.zbForm.id = zb.id;
                this.zbForm.serial = zb.serial;
                this.zbForm.cousName = zb.title;
                this.zbForm.img = zb.img;
                this.zbForm.date = zb.kssj.substr(0, 10);
                this.zbForm.timeValue = [zb.kssj.substr(11, 16), zb.jssj.substr(11, 16)];
                // this.xgzb = true;
                this.$nextTick(res => {
                    // this.setEditor()
                    this.$refs.child.setEditor()
                    this.$refs.child.getData()
                })

            },
            updateLive() {
                //查询录播状态
                this.$ajax.post('/live/getLiveStatus', {
                    "serial": this.zbForm.serial
                }).then(res => {
                    if (res.data == 0) {
                        var kssj = this.zbForm.date + ' ' + this.zbForm.timeValue[0];
                        var jssj = this.zbForm.date + ' ' + this.zbForm.timeValue[1];
                        let vo = {
                            id: this.zbForm.id,
                            serial: this.zbForm.serial,
                            title: this.zbForm.cousName,
                            img: this.zbForm.img,
                            kssj: new Date(kssj).getTime() / 1000,
                            jssj: new Date(jssj).getTime() / 1000,
                            cont: this.editor.txt.html(),
                        };
                        this.$ajax.post('/live/updateLive', vo).then(res => {
                            if (res.code == 0) {
                                this.$message({
                                    message: '操作成功！',
                                    type: 'success'
                                });
                                this.initZbk();
                                this.xgzb = false;
                            } else {
                                this.$message.error('操作失败！');
                            }
                        })
                    } else {
                        this.$message.error('录播已开始，禁止操作！');
                    }
                })
            },
            timestampToTime(cjsj) {
                var date = new Date(cjsj * 1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '-'
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
                var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
                var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
                //var s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
                return Y + M + D + h + m;
            },
            initZbk() {
                this.$ajax.post('/wyxyrecordcous/recordcouslist', {
                    userid: this.user.id,
                    searchText: this.searchText,
                    pageNum: this.page.pageNum,
                    pageSize: this.page.pageSize
                }).then(res => {
                    console.log(res);
                    // if(res.code == 0){
                    this.page = res.data;
                    if (res.data.list.length != 0) {
                        for (var i = 0; i < this.page.list.length; i++) {
                            this.page.list[i].kssj = this.timestampToTime(this.page.list[i].kssj);
                            this.page.list[i].jssj = this.timestampToTime(this.page.list[i].jssj);
                        }
                    }
                    // }

                })
            },
            startZb(item) {
                console.log(item.displayUrl);
                window.open(item.displayUrl);
                // if (item.status == 0 || item.status == 1) {
                //     window.open("https://yhxy.at.baijiayun.com/web/room/quickenter?code=" + item.teacherCode +
                //         "&user_name=" + this.user.name);
                // } else if (item.status == 2) {
                //     this.$ajax.post('/live/getPlayerToken', {
                //         roomId: item.serial
                //     }).then(resp => {
                //         if (resp.code == 0) {
                //             window.open("https://yhxy.at.baijiayun.com/web/playback/index?classid=" + item
                //                 .serial + "&token=" + resp.data.token);
                //         } else {
                //             this.$message.error('录播尚未生成');
                //         }
                //     })
                // } else {
                //     this.$message.error('录播已过期');
                // }
            },
            progress(event, file, fileList) {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            success(response, file, fileList) {
                this.zbForm.img = response.body.data.url;
                this.loading.close();
                this.$message.success('文件上传成功！');
            },
            beforeUpload(file) {
                const fileName = file.name;
                const index = fileName.lastIndexOf(".");
                const ext = fileName.substr(index + 1);
                const arr = ["jpg", "png", "gif", "jpeg"];
                const isOk = arr.includes(ext);
                if (!isOk) {
                    this.$message.warning('图片格式暂不支持！');
                    return false;
                }
            },
            change(i, ytUrl, mhUrl) {
                this.num = i;
                this.zbForm.img = ytUrl;
            },
            delLive(id, serial) {
                console.log(id)
                //查询录播状态
                this.$ajax.post('/live/getLiveStatus', {
                    "serial": serial
                }).then(res => {
                    this.$confirm('确认删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$ajax.post('/live/delLive', {
                            id: id,
                            serial: serial
                        }).then((r) => {
                            if (r.code != 0) {
                                this.$message.error('操作失败！');
                            } else {
                                this.$message({
                                    message: '操作成功！',
                                    type: 'success'
                                });
                                this.initZbk();
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                })
            }
        },
        beforeDestroy() {
            // 销毁编辑器

        }
    }
</script>

<style lang="scss" scoped>
    .top {
        box-sizing: border-box;
        height: 100%;
    }

    .main {
        height: calc(100% - 120px);

        .search {
            display: flex;
            justify-content: space-between;
        }

        .flex-s {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .flex-s>>>.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
            border: none;
        }

        .flex-s>>>.el-menu.el-menu--horizontal {
            border: none;
        }

        .course-ul {
            height: calc(100% - 102px);
            display: flex;
            flex-direction: column;
            align-items: center;
            // justify-content: center;

            .course-ul-main {
                width: 100%;
                max-width: 1150px;
                // display: flex;
                // flex-wrap: wrap;
                // align-content: flex-start;
                // justify-content: space-between;s
            }

            .course-ul-li {
                box-sizing: border-box;
                padding: 15px;
                position: relative;
                z-index: 0;
                margin-top: 20px;
                display: flex;
                flex-direction: column;
                // margin: 15px 15px 0 0;
                man-width: 240px;
                height: 230px;
                background-color: #fff;
                text-align: center;
                border-radius: 10px;
                overflow: hidden;
                transition: .1s ease-in-out 0s;

                // &:nth-child(4n){
                //     margin-right: 0;
                // }

                &:hover {
                    box-shadow: 0px 1px 5px rgba(86, 86, 86, 0.3);
                    cursor: pointer;

                    .img {
                        .icon-play {
                            display: block;
                            z-index: 10000000;
                        }
                    }

                }

                .live-bar {
                    position: absolute;
                    top: 20px;
                    right: 0;
                    z-index: 12222;
                    display: flex;
                    justify-content: space-between;

                    .live-status {
                        width: 90px;
                        height: 30px;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        color: #fff;
                        background-color: #9392fd;
                        border-radius: 10px 0;
                        cursor: pointer;
                    }

                    .live-status-end {
                        width: 90px;
                        height: 30px;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        color: #fff;
                        background-color: #ad8a8a;
                        border-radius: 10px 0;
                        cursor: pointer;
                    }

                    .edit-cont {
                        .edit {
                            box-sizing: border-box;
                            padding-right: 20px;
                            text-align: right !important;
                            height: 30px;
                            line-height: 30px;
                            color: #fff;
                            font-size: 30px;

                        }

                        &:hover {
                            .cop-bar {
                                display: block;
                            }
                        }

                        .cop-bar {
                            display: none;
                            width: 100px;
                            height: 80px;
                            background-color: #fff;

                            div {
                                height: 40px;
                                line-height: 40px;

                                &:hover {
                                    background-color: #409eff;
                                    color: #fff;
                                }
                            }
                        }
                    }

                }

                .img {
                    position: relative;
                    height: 160px;
                    overflow: hidden;

                    .icon-play {
                        width: 50px;
                        height: 50px;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        display: none;
                    }

                    .pic {
                        width: 100%;
                        height: 100%;
                        z-index: 100;
                        transition: .3s ease-in-out;
                    }

                    &:hover {
                        .pic {
                            transform: scale(1.3);
                        }
                    }
                }

                .live-info {
                    text-align: left;

                    .live-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .course-name {
                            box-sizing: border-box;
                            padding: 3px 10px;
                            width: 100%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 16px;
                            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                        }

                        .icon {
                            text-align: center;
                            padding: 5px 5px;
                            width: 140px;
                            height: 20px;
                            // background-color: #57d828;
                            color: #ffaa00;
                            border-radius: 5px;
                        }
                    }

                    .live-bottom {
                        box-sizing: border-box;
                        padding-right: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .tr-name {
                            display: flex;
                            align-items: center;
                            box-sizing: border-box;
                            padding: 3px 10px;

                            .name {
                                max-width: 80px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                        }

                        .cnt {
                            color: #48af20;
                        }
                    }

                    .tr-name {
                        box-sizing: border-box;
                        padding: 3px 10px;

                    }
                }
            }
        }
    }

    .el-dialog-div {
        display: flex;
        flex-direction: column;
        height: 496px;

        .info {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .info-form {
                display: flex;
                // width: 403px;
                height: 218px;
            }

            .upPic {
                width: 304px;
                height: 216px;
                background-color: #f8f9fd;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                border: solid 1px #d6dbe8;
                border-radius: 5px;
            }

            .line-center {
                display: flex;
                flex-direction: column;
                // justify-content: flex-start;
                align-content: space-between;
            }
        }

        .type {
            padding: 0 0 30px 0;
            width: 100%;
            height: 190px;

            .type-item {
                display: flex;
                justify-content: space-between;

                // align-items: center;
                .type-list {
                    width: 229px;
                    height: 158px;
                    background-color: #fefefe;
                    border-radius: 5px;
                    border: solid 1px #d6dbe8;

                    .type-bg {
                        text-align: center;
                        width: 100%;
                        height: 103px;
                    }

                    .type-info {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        .n1 {
                            font-size: 18px;
                            color: #2e323e;
                        }

                        .n2 {
                            font-size: 12px;
                            color: #888fa0;
                        }
                    }

                    &:hover {
                        cursor: pointer;
                        border: solid 1px #5b90ff;
                    }

                    &.checked {
                        border: solid 1px #5b90ff;
                    }
                }
            }

        }
    }




    .main {

        .create-btn {
            width: 182px;
            background-color: #4c87ff;
            border-radius: 21px;
        }

        .el-dialog-div {
            display: flex;
            flex-direction: column;
            height: 496px;

            .info {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .info-form {
                    display: flex;
                    // width: 403px;
                    height: 218px;

                    .img-up {
                        margin-left: 15px;
                        display: grid;
                    }
                }

                .upPic {
                    width: 304px;
                    height: 216px;
                    background-color: #f8f9fd;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    border: solid 1px #d6dbe8;
                    border-radius: 5px;
                }

                .line-center {
                    display: flex;
                    flex-direction: column;
                    // justify-content: flex-start;
                    align-content: space-between;
                }
            }

            .type {
                padding: 0 0 30px 0;
                width: 100%;
                height: 190px;

                .type-item {
                    display: flex;
                    justify-content: flex-start;

                    // align-items: center;
                    .type-list {
                        margin-right: 20px;
                        width: 229px;
                        height: 158px;
                        background-color: #fefefe;
                        border-radius: 5px;
                        border: solid 1px #d6dbe8;

                        .type-bg {
                            text-align: center;
                            width: 100%;
                            height: 103px;
                        }

                        .type-info {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;

                            .n1 {
                                font-size: 18px;
                                color: #2e323e;
                            }

                            .n2 {
                                font-size: 12px;
                                color: #888fa0;
                            }
                        }

                        &:hover {
                            cursor: pointer;
                            border: solid 1px #5b90ff;
                        }

                        &.checked {
                            border: solid 1px #5b90ff;
                        }
                    }
                }

            }
        }
    }

    .h-auto {
        height: calc(100% - 80px);
    }

    .slt {
        margin: 15px auto 0;
        width: 100%;
        box-sizing: border-box;
    }

    .slt .img {
        width: 48px;
        height: 48px;
        margin-right: 10px;
        border: 2px solid #fff;
    }

    .slt .img.checked {
        border: 2px solid #00aeff;
    }


    .up-img-div {
        position: relative;
        width: 398px;
        height: 140px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .el-upload {
        height: 144px;
    }

    .avatar {
        width: 298px;
        height: 100%;
        display: block;
    }

    .nodata {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .img {
            margin-bottom: 20px;
            width: 160px;
            height: 160px;
        }
    }

    .center {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .nav-bar {
        margin: 30px auto;
        width: 1150px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .teach-title {
        position: relative;
        // padding: 0 40px;
        height: 42px;
        display: flex;
        flex-direction: row;
        align-items: center;

        .title-right {
            display: flex;
            height: 100%;

            .navs {
                width: 184px;
                height: 100%;
                line-height: 42px;
                text-align: center;
                border: 1px solid #84a8f3;
                color: #737171;
                border-top: 1px solid #84a8f3;
                border-bottom: 1px solid #84a8f3;
                cursor: pointer;


                &:last-child {
                    border: none;
                    border-top-right-radius: 21px;
                    border-bottom-right-radius: 21px;
                    border-right: 1px solid #84a8f3;
                    border-top: 1px solid #84a8f3;
                    border-bottom: 1px solid #84a8f3;
                }

                &:first-child {
                    border: none;
                    border-top-left-radius: 21px;
                    border-bottom-left-radius: 21px;
                    border-top: 1px solid #84a8f3;
                    border-left: 1px solid #84a8f3;
                    border-bottom: 1px solid #84a8f3;
                }

                &.checked {
                    color: #fff;
                    background-color: #84a8f3;
                }
            }

        }

        .ll {
            position: absolute;
            top: 0;
            right: 40px;
            height: 100%;
            display: flex;
            align-items: center;

        }
    }

    .el-dialog-div {
        display: flex;
        flex-direction: column;
        height: 400px;

        .info {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .info-form {
                display: flex;
                // width: 403px;
                height: 218px;

                .img-up {
                    margin-left: 50px;
                    display: grid;
                }
            }

            .upPic {
                width: 304px;
                height: 216px;
                background-color: #f8f9fd;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                border: solid 1px #d6dbe8;
                border-radius: 5px;
            }

            .line-center {
                display: flex;
                flex-direction: column;
                // justify-content: flex-start;
                align-content: space-between;
            }
        }

        .type {
            padding: 0 0 30px 0;
            width: 100%;
            height: 190px;

            .type-item {
                display: flex;
                justify-content: center;

                // align-items: center;
                .type-list {
                    margin-right: 20px;
                    width: 229px;
                    height: 158px;
                    background-color: #fefefe;
                    border-radius: 5px;
                    border: solid 1px #d6dbe8;

                    .type-bg {
                        text-align: center;
                        width: 100%;
                        height: 103px;
                    }

                    .type-info {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        .n1 {
                            font-size: 18px;
                            color: #2e323e;
                        }

                        .n2 {
                            font-size: 12px;
                            color: #888fa0;
                        }
                    }

                    // &:hover {
                    // 	cursor: pointer;
                    // 	border: solid 1px #5b90ff;
                    // }

                    &.checked {
                        border: solid 1px #5b90ff;
                    }
                }
            }

        }
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .el-upload {
        height: 144px;
    }

    .avatar {
        width: 298px;
        height: 244px;
        display: block;
    }

    .slt {
        margin: 15px auto 0;
        width: 100%;
        box-sizing: border-box;
    }

    .slt .img {
        width: 48px;
        height: 48px;
        margin-right: 10px;
        border: 2px solid #fff;
    }

    .slt .img.checked {
        border: 2px solid #00aeff;
    }


    .main {
        height: calc(100% - 80px);

        .create-btn {
            width: 182px;
            background-color: #4c87ff;
            border-radius: 21px;
        }

        .el-dialog-div {
            display: flex;
            flex-direction: column;
            height: 400px;

            .info {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .info-form {
                    display: flex;
                    // width: 403px;
                    height: 218px;

                    .img-up {
                        margin-left: 50px;
                        display: grid;
                    }
                }

                .upPic {
                    width: 304px;
                    height: 216px;
                    background-color: #f8f9fd;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    border: solid 1px #d6dbe8;
                    border-radius: 5px;
                }

                .line-center {
                    display: flex;
                    flex-direction: column;
                    // justify-content: flex-start;
                    align-content: space-between;
                }
            }

            .type {
                padding: 0 0 30px 0;
                width: 100%;
                height: 190px;

                .type-item {
                    display: flex;
                    justify-content: center;

                    // align-items: center;
                    .type-list {
                        margin-right: 20px;
                        width: 229px;
                        height: 158px;
                        background-color: #fefefe;
                        border-radius: 5px;
                        border: solid 1px #d6dbe8;

                        .type-bg {
                            text-align: center;
                            width: 100%;
                            height: 103px;
                        }

                        .type-info {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;

                            .n1 {
                                font-size: 18px;
                                color: #2e323e;
                            }

                            .n2 {
                                font-size: 12px;
                                color: #888fa0;
                            }
                        }

                        // &:hover {
                        // 	cursor: pointer;
                        // 	border: solid 1px #5b90ff;
                        // }

                        &.checked {
                            border: solid 1px #5b90ff;
                        }
                    }
                }

            }
        }
    }

    .h-auto {
        height: calc(100% - 80px);
    }

    .slt {
        margin: 15px auto 0;
        width: 300px;
        height: 83px;
        box-sizing: border-box;
        overflow-x: scroll;
        white-space: nowrap;
    }

    .slt .img {
        width: 48px;
        height: 48px;
        margin-right: 10px;
        border: 2px solid #fff;
    }

    .slt .img.checked {
        border: 2px solid #00aeff;
    }


    .up-img-div {
        position: relative;
        width: 300px;
        height: 224px;
    }

    .el-upload {
        position: relative;
    }

    .posa-icon {
        background: rgba(3, 3, 3, .3);
        border-radius: 2px;
        padding: 0 15px 0 15px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .el-upload {
        height: 144px;
    }

    .avatar {
        width: 298px;
        height: 244px;
        display: block;
    }

    .class-list {

        &>>>.el-form-item__content {
            display: flex;
        }
    }

    .add-course>>>.el-dialog {
        height: 100%;
    }

    .psa-img {
        padding-top: 10px;
    }

    .addclassbtn {
        margin: 0 0 5px 235px;
    }

    .delcs {
        margin-left: 10px;
    }

    .share {
        width: 26px;
        height: 26px;
        padding-right: 10px;
    }

    .el-icon-position {
        font-size: 26px;
    }

    .dia-cont {
        padding: 0 50px;
        display: flex;
        flex-direction: column;

        .dia-top {
            display: flex;
            align-items: center;

            .img {
                width: 160px;
                height: 160px;
                margin-right: 50px;
            }

            .dia-info {
                font-size: 18px;
            }

        }

        .step {
            padding: 20px 0;
            font-size: 18px;
        }
    }

    .kssj {
        position: absolute;
        bottom: 58px;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 1000;
        padding: 5px 0;
        width: 200px;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        background-color: rgba(83, 83, 83, 0.7);
        color: #ff8560;

        .tips {
            font-weight: bold;
        }
    }

    .qrcode {
        display: inline-block;

        img {
            width: 132px;
            height: 132px;
            background-color: #fff; //设置白色背景色
            padding: 6px; // 利用padding的特性，挤出白边
            box-sizing: border-box;
        }
    }

    .dia>>>.el-textarea__inner {
        height: 120px !important;
    }

    .button {
        float: right;
        width: 120px;
    }
</style>
